<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8"/>
        <title>targets</title>
    </head>

    <body>
        <div th:include="top :: html"></div>
        <div class="contentDiv">
            <table class="table table-hover table-condensed">
                <legend>
                    <strong><a th:text="${upstream.name}"/>/targets</strong>
                </legend>
                <thead>
                    <tr>
                        <th>target</th>
                        <th>weight</th>
                        <th>created_at</th>
                        <th>operate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="target : ${targets}">
                        <th scope="row" th:text="${target.target}"></th>
                        <th scope="row" th:text="${target.weight}"></th>
                        <td th:text="${#dates.format(target.created_at * 1000, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <a class="btn btn-danger btn-delete" href="javascript:void(0)" th:upstream="${upstream.id}" th:value="${target.id}">delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div>
                <a class="btn btn-primary" th:href="@{'/kong/upstreams/' + ${upstream.id} + '/targets/add'}" role="button">add target</a>
                <input class="btn " type="button" value="go back" onclick="history.back()"/>
            </div>
        </div>
        <script type="application/javascript">
            $(function(){
                $('.btn-delete').click(function(){
                    if(!confirm("Make sure to delete this?")){
                        return;
                    }
                    var target_id = $(this).attr('value');
                    var upstream_id = $(this).attr('upstream');
                    var url = "/kong/upstreams/" + upstream_id + "/targets/"+target_id + "/del";
                    $.ajax({
                        url: url,
                        async: false,
                        type: "delete",
                        success: function(){
                            window.location.reload();
                        },
                        error: function(e){
                            alert(e.message);
                            window.location.reload();
                        }
                    })
                });
            })
        </script>
    </body>
</html>